<template>
    <div class="min-h-screen bg-[#F7F8FA] relative overflow-hidden">
        <!-- 导航栏 -->
        <nav class="flex flex-col md:flex-row items-center justify-between px-4 md:px-8 py-4 bg-white border-b border-gray-100">
            <div class="flex items-center w-full md:w-auto justify-between md:justify-start">
                <div class="flex items-center">
                    <img src="@/assets/images/logo.png" alt="试题宝库" class="h-6 md:h-8">
                    <div class="flex flex-col">
                        <span class="ml-2 text-gray-500 text-xs md:text-sm">试题宝库</span>
                        <span class="ml-2 text-gray-500 text-[10px] md:text-xs opacity-50">shiti.cc</span>
                    </div>
                </div>
                <!-- 移动端菜单按钮 -->
                <button class="md:hidden text-gray-500" @click="mobileMenuOpen = !mobileMenuOpen">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                    </svg>
                </button>
            </div>
            
            <!-- 导航链接 - 桌面端 -->
            <div class="hidden md:flex ml-8 space-x-4 items-center">
                <a href="#" class="text-gray-900 px-4 py-1 rounded-md bg-gray-100">首页</a>
                <router-link to="/analysis" class="text-gray-600 px-4 py-1">题库广场</router-link>
                <router-link to="/analysis" class="text-gray-600 px-4 py-1">K12题库</router-link>
            </div>
            
            <!-- 右侧按钮 - 桌面端 -->
            <div class="hidden md:flex items-center space-x-4">
                <router-link to="/analysis"
                    class="bg-blue-50 text-blue-600 px-4 py-1 rounded-md hover:bg-blue-100 transition-colors">立即使用</router-link>
            </div>
            
            <!-- 移动端菜单 -->
            <div v-if="mobileMenuOpen" class="md:hidden w-full mt-4 space-y-2">
                <a href="#" class="block text-gray-900 px-4 py-2 rounded-md bg-gray-100">首页</a>
                <router-link to="/analysis" class="block text-gray-600 px-4 py-2">题库广场</router-link>
                <router-link to="/analysis" class="block text-gray-600 px-4 py-2">K12题库</router-link>
                <router-link to="/analysis"
                    class="block bg-blue-50 text-blue-600 px-4 py-2 rounded-md hover:bg-blue-100 transition-colors mt-2">立即使用</router-link>
            </div>
        </nav>

        <!-- 主要内容 -->
        <div class="container mx-auto px-4 pt-10 md:pt-20 text-center relative">
            <!-- 背景装饰 - 在移动端隐藏部分装饰 -->
            <div class="absolute inset-0 pointer-events-none hidden md:block">
                <div class="absolute left-20 top-40 w-8 h-8 bg-[#2970FF] opacity-10 rounded"></div>
                <div class="absolute left-40 top-20 w-6 h-6 bg-[#2970FF] opacity-10 rounded"></div>
                <div class="absolute right-40 top-60 w-10 h-10 bg-[#2970FF] opacity-10 rounded"></div>
            </div>

            <!-- 用户头像区 -->
            <div class="flex justify-center mb-6">
                <div class="py-2 px-4 md:px-6 rounded-full border border-gray-200 bg-white flex items-center">
                    <div class="flex">
                        <div class="border-2 border-white rounded-full">
                            <img alt="avatar" width="20" height="20" src="@/assets/images/home/avatar-1.png"
                                class="rounded-full w-5 h-5 md:w-6 md:h-6">
                        </div>
                        <div class="border-2 border-white rounded-full -ml-2">
                            <img alt="avatar" width="20" height="20" src="@/assets/images/home/avatar-2.png"
                                class="rounded-full w-5 h-5 md:w-6 md:h-6">
                        </div>
                        <div class="border-2 border-white rounded-full -ml-2">
                            <img alt="avatar" width="20" height="20" src="@/assets/images/home/avatar-3.png"
                                class="rounded-full w-5 h-5 md:w-6 md:h-6">
                        </div>
                        <div class="border-2 border-white rounded-full -ml-2">
                            <img alt="avatar" width="20" height="20" src="@/assets/images/home/avatar-4.png"
                                class="rounded-full w-5 h-5 md:w-6 md:h-6">
                        </div>
                    </div>
                    <div class="text-gray-700 ml-2 text-xs md:text-sm">1,500,000+ 用户选择使用</div>
                </div>
            </div>

            <!-- 标题区域 -->
            <h1 class="text-2xl md:text-4xl font-bold mb-3 md:mb-4 text-[#003366]">
                AI智能出题 · 高效备考
                <br>
                <span class="text-[#2970FF]">快速提升学习效率</span>
            </h1>
            <p class="text-sm md:text-base text-gray-600 mb-6 md:mb-8">智能分析知识点，针对性训练，让学习更高效</p>

            <!-- 输入框 -->
            <div class="max-w-2xl mx-auto relative">
                <input type="text" placeholder="生成一套关于《三体》的考试试题"
                    class="w-full h-12 md:h-14 px-4 md:px-6 rounded-lg shadow-md border border-gray-200 focus:outline-none focus:border-blue-500 text-sm md:text-base">
                <button
                    class="absolute right-1 md:right-2 top-1/2 -translate-y-1/2 bg-[#2970FF] text-white px-3 md:px-6 py-1.5 md:py-2 rounded-lg hover:bg-blue-600 transition-colors text-xs md:text-sm">
                    立即开始
                </button>
            </div>

            <!-- ABCD 装饰 - 在移动端隐藏 -->
            <div class="absolute right-20 top-20 hidden md:block">
                <span class="inline-block px-3 py-1 bg-[#2970FF] text-white rounded mr-2">A</span>
                <span class="inline-block px-3 py-1 bg-[#2970FF] text-white rounded">B</span>
            </div>
            <div class="absolute right-40 top-40 hidden md:block">
                <span class="inline-block px-3 py-1 bg-[#2970FF] text-white rounded mr-2">C</span>
                <span class="inline-block px-3 py-1 bg-[#2970FF] text-white rounded">D</span>
            </div>
        </div>
    </div>

    <!-- 特性介绍 -->
    <div class="container mx-auto px-4 py-8 md:py-10">
        <h2 class="text-xl md:text-3xl font-bold text-center mb-8 md:mb-16">让我们发现你的不足，利用AI教育大模型量身定制针对性训练，极速提升</h2>

        <!-- 两个主要卡片的容器 - 移动端改为纵向排列 -->
        <div class="flex flex-col md:flex-row justify-center md:gap-8 gap-4 mb-8 md:mb-10">
            <!-- 左侧卡片 -->
            <div class="w-full md:w-[540px] rounded-2xl md:rounded-3xl p-4 md:p-6 text-white"
                style="background: linear-gradient(48.72deg, #6BA5F4 0%, #003CFF 54.77%, #6772FF 109.66%)">
                <div class="text-xl md:text-2xl font-semibold text-center mb-2">持续进化的AI教育大模型</div>
                <div class="text-xl md:text-2xl font-semibold text-center mb-3 md:mb-4">比你更懂你，随时帮助你</div>
                <div class="text-sm md:text-base mb-4 md:mb-6 mx-auto text-center">
                    只需要提供学习内容或者输出知识点，AI能识别知识点，分析学习弱点，针对性生成训练内容，让学生一举多得掌握知识点
                </div>
                <div class="flex justify-center mb-3 md:mb-4">
                    <button class="bg-white text-[#2970FF] px-4 md:px-6 py-1.5 md:py-2 rounded-full text-sm md:text-base">随时随地测评，发现不足</button>
                </div>
                <div class="flex justify-start ml-4 md:ml-8 mt-2 md:mt-4">
                    <div class="bg-white/20 text-white px-3 md:px-4 py-1 md:py-2 rounded-full text-xs md:text-sm">AI教育大模型，持续进化</div>
                </div>
            </div>

            <!-- 右侧卡片 -->
            <div class="w-full md:w-[540px] rounded-2xl md:rounded-3xl p-4 md:p-6 text-white" style="background: rgba(32, 39, 58, 1)">
                <div class="text-xl md:text-2xl font-semibold text-center mb-2">持续进化的AI教育大模型</div>
                <div class="text-xl md:text-2xl font-semibold text-center mb-3 md:mb-4">比你更懂你，随时帮助你</div>
                <div class="text-sm md:text-base mb-4 md:mb-6 mx-auto text-center">
                    只需要提供学习内容或者输出知识点，AI能识别知识点，分析学习弱点，针对性生成训练内容，让学生一举多得掌握知识点
                </div>
                <div class="flex justify-center mb-3 md:mb-4">
                    <button class="bg-white text-[#2970FF] px-4 md:px-6 py-1.5 md:py-2 rounded-full text-sm md:text-base">定制练习，满足需求</button>
                </div>
                <div class="relative flex justify-center mt-2 md:mt-4">
                    <img alt="chart" width="80" height="80" src="@/assets/images/home/chart.png" class="mx-auto w-20 h-20 md:w-[120px] md:h-[120px]">
                </div>
            </div>
        </div>

        <!-- 三个功能特点 - 移动端改为纵向排列 -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-8 mb-8 md:mb-10">
            <!-- 智能测评 -->
            <div class="text-center">
                <div class="w-12 h-12 md:w-16 md:h-16 mx-auto mb-3 md:mb-4 flex items-center justify-center">
                    <img src="@/assets/images/home/icon-test.png" alt="智能测评" class="w-10 h-10 md:w-12 md:h-12">
                </div>
                <h3 class="text-base md:text-lg font-medium mb-2 md:mb-3 text-red-500">智能测评，立刻开始</h3>
                <p class="text-xs md:text-sm text-gray-600">可以随时开始测评，告知自己的学习方式偏好，知识点弱项，针对性制定专属学习计划</p>
            </div>

            <!-- 针对训练 -->
            <div class="text-center">
                <div class="w-12 h-12 md:w-16 md:h-16 mx-auto mb-3 md:mb-4 flex items-center justify-center">
                    <img src="@/assets/images/home/icon-train.png" alt="针对训练" class="w-10 h-10 md:w-12 md:h-12">
                </div>
                <h3 class="text-base md:text-lg font-medium mb-2 md:mb-3 text-purple-500">针对训练，随时可练</h3>
                <p class="text-xs md:text-sm text-gray-600">针对性的训练内容，强化针对性的薄弱点，学生可以随时练习，帮助自己在线掌握知识点</p>
            </div>

            <!-- 保持领先 -->
            <div class="text-center">
                <div class="w-12 h-12 md:w-16 md:h-16 mx-auto mb-3 md:mb-4 flex items-center justify-center">
                    <img src="@/assets/images/home/icon-lead.png" alt="保持领先" class="w-10 h-10 md:w-12 md:h-12">
                </div>
                <h3 class="text-base md:text-lg font-medium mb-2 md:mb-3 text-blue-500">保持领先，AI伴航</h3>
                <p class="text-xs md:text-sm text-gray-600">通过数据分析和AI，为你提供针对性的训练内容，保持学习的领先优势</p>
            </div>
        </div>
    </div>
    <!-- 页脚 -->
    <footer class="text-center py-4 text-xs md:text-sm text-gray-500 border-t border-gray-200 px-4">
        <div class="space-y-2">
            <p class="text-blue-500">系统版本：1.002.01 每周都会OTA进步的-教育辅助系统 and AI教育智能体！</p>
            <p class="text-[10px] md:text-xs">今日更新试题：9879 道 今日更新试卷：198 套，系统当前总试题：2987999 道 系统当前总试卷：99812 套</p>
            <p>2025 版权所有© 武汉XX有限公司 鄂ICP备xxxxxx</p>
        </div>
    </footer>
</template>

<script setup>
import { ref } from 'vue'
import { Monitor, User, DataAnalysis, TrendCharts } from '@element-plus/icons-vue'

// 移动端菜单状态
const mobileMenuOpen = ref(false)
</script>

<style scoped>
/* 如果需要自定义样式可以在这里添加 */
</style>